<template>
    <!-- 使用 grid 网格布局，并指定列数为 2，高度占满全屏 -->
    <div class="grid grid-cols-2 h-screen">
        <!-- 默认先适配移动端，占两列，order 用于指定排列顺序，md 用于适配非移动端（PC 端）；背景色为黑色 -->
        <div
            class="col-span-2 order-2 p-10 md:col-span-1 md:order-1 bg-slate-500 animate__animated animate__bounceInLeft animate__fast">
            <div class="flex justify-center items-center h-full">
                <!-- 指定为 flex 布局，并设置为屏幕垂直水平居中，高度为 100% -->
                <div class="flex justify-center items-center h-full flex-col">
                    <h2 class="font-bold text-4xl mb-7 text-white">未见花闻个人博客平台登录</h2>
                    <p class="text-white">一款由 Spring Boot + Mybaits Plus + Vue 3.2 + Vite 4 开发的前后端分离博客。</p>
                    <!-- 指定图片宽度为父级元素的 1/2 -->
                    <img src="@/assets/login.svg" class="w-1/2">
                </div>
            </div>
        </div>
        <div
            class="flex flex-col col-span-2 order-1 md:col-span-1 md:order-2 bg-white animate__animated animate__bounceInRight animate__fast dark:bg-gray-800">
            <!-- 白天黑夜切换开关 -->
            <label id="theme-toggle-button" class="ml-auto mt-4 mr-4 flex flex-col">
                <input type="checkbox" id="toggle" @click="toggleDark()" aria-checked="true" :checked="!isLight">
                <svg viewBox="0 0 70 44" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-24 h-10" 
                    xmlns="http://www.w3.org/2000/svg">
                    <g transform="translate(3.5 3.5)" data-name="Component 15 – 1" id="Component_15_1">


                        <g filter="url(#container)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
                            <rect fill="#83cbd8" transform="translate(3.5 3.5)" rx="17.5" height="35" width="60.667"
                                data-name="container" id="container"></rect>
                        </g>

                        <g transform="translate(2.333 2.333)" id="button">

                            <g data-name="sun" id="sun">
                                <g filter="url(#sun-outer)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
                                    <circle fill="#f8e664" transform="translate(5.83 5.83)" r="15.167" cy="15.167"
                                        cx="15.167" data-name="sun-outer" id="sun-outer-2"></circle>
                                </g>
                                <g filter="url(#sun)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
                                    <path fill="rgba(246,254,247,0.29)" transform="translate(9.33 9.33)"
                                        d="M11.667,0A11.667,11.667,0,1,1,0,11.667,11.667,11.667,0,0,1,11.667,0Z"
                                        data-name="sun" id="sun-3"></path>
                                </g>
                                <circle fill="#fcf4b9" transform="translate(8.167 8.167)" r="7" cy="7" cx="7"
                                    id="sun-inner"></circle>
                            </g>


                            <g data-name="moon" id="moon">
                                <g filter="url(#moon)" transform="matrix(1, 0, 0, 1, -31.5, -5.83)">
                                    <circle fill="#cce6ee" transform="translate(31.5 5.83)" r="15.167" cy="15.167"
                                        cx="15.167" data-name="moon" id="moon-3"></circle>
                                </g>
                                <g fill="#a6cad0" transform="translate(-24.415 -1.009)" id="patches">
                                    <circle transform="translate(43.009 4.496)" r="2" cy="2" cx="2"></circle>
                                    <circle transform="translate(39.366 17.952)" r="2" cy="2" cx="2" data-name="patch">
                                    </circle>
                                    <circle transform="translate(33.016 8.044)" r="1" cy="1" cx="1" data-name="patch">
                                    </circle>
                                    <circle transform="translate(51.081 18.888)" r="1" cy="1" cx="1" data-name="patch">
                                    </circle>
                                    <circle transform="translate(33.016 22.503)" r="1" cy="1" cx="1" data-name="patch">
                                    </circle>
                                    <circle transform="translate(50.081 10.53)" r="1.5" cy="1.5" cx="1.5"
                                        data-name="patch"></circle>
                                </g>
                            </g>
                        </g>


                        <g filter="url(#cloud)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
                            <path fill="#fff" transform="translate(-3466.47 -160.94)"
                                d="M3512.81,173.815a4.463,4.463,0,0,1,2.243.62.95.95,0,0,1,.72-1.281,4.852,4.852,0,0,1,2.623.519c.034.02-.5-1.968.281-2.716a2.117,2.117,0,0,1,2.829-.274,1.821,1.821,0,0,1,.854,1.858c.063.037,2.594-.049,3.285,1.273s-.865,2.544-.807,2.626a12.192,12.192,0,0,1,2.278.892c.553.448,1.106,1.992-1.62,2.927a7.742,7.742,0,0,1-3.762-.3c-1.28-.49-1.181-2.65-1.137-2.624s-1.417,2.2-2.623,2.2a4.172,4.172,0,0,1-2.394-1.206,3.825,3.825,0,0,1-2.771.774c-3.429-.46-2.333-3.267-2.2-3.55A3.721,3.721,0,0,1,3512.81,173.815Z"
                                data-name="cloud" id="cloud"></path>
                        </g>


                        <g fill="#def8ff" transform="translate(3.585 1.325)" id="stars">
                            <path transform="matrix(-1, 0.017, -0.017, -1, 24.231, 3.055)"
                                d="M.774,0,.566.559,0,.539.458.933.25,1.492l.485-.361.458.394L1.024.953,1.509.592.943.572Z">
                            </path>
                            <path transform="matrix(-0.777, 0.629, -0.629, -0.777, 23.185, 12.358)"
                                d="M1.341.529.836.472.736,0,.505.46,0,.4.4.729l-.231.46L.605.932l.4.326L.9.786Z"
                                data-name="star"></path>
                            <path transform="matrix(0.438, 0.899, -0.899, 0.438, 23.177, 29.735)"
                                d="M.015,1.065.475.9l.285.365L.766.772l.46-.164L.745.494.751,0,.481.407,0,.293.285.658Z"
                                data-name="star"></path>
                            <path transform="translate(12.677 0.388) rotate(104)"
                                d="M1.161,1.6,1.059,1,1.574.722.962.607.86,0,.613.572,0,.457.446.881.2,1.454l.516-.274Z"
                                data-name="star"></path>
                            <path transform="matrix(-0.07, 0.998, -0.998, -0.07, 11.066, 15.457)"
                                d="M.873,1.648l.114-.62L1.579.945,1.03.62,1.144,0,.706.464.157.139.438.7,0,1.167l.592-.083Z"
                                data-name="star"></path>
                            <path transform="translate(8.326 28.061) rotate(11)"
                                d="M.593,0,.638.724,0,.982l.7.211.045.724.36-.64.7.211L1.342.935,1.7.294,1.063.552Z"
                                data-name="star"></path>
                            <path transform="translate(5.012 5.962) rotate(172)"
                                d="M.816,0,.5.455,0,.311.323.767l-.312.455.516-.215.323.456L.827.911,1.343.7.839.552Z"
                                data-name="star"></path>
                            <path transform="translate(2.218 14.616) rotate(169)"
                                d="M1.261,0,.774.571.114.3.487.967,0,1.538.728,1.32l.372.662.047-.749.728-.218L1.215.749Z"
                                data-name="star"></path>
                        </g>
                    </g>
                </svg>
            </label>
            <div class="flex justify-center items-center h-full flex-col dark:bg-gray-800">
                <h1 class="font-bold text-4xl mb-5 dark:text-white">用户登录</h1>
                <!-- 使用flex布局 -->
                <div class="flex items-center justify-center mb-7 text-gray-400 space-x-2 dark:text-gray-500">
                    <span class="h-[1px] w-16 bg-gray-200 dark:bg-gray-700"></span>

                    <span>
                        账号密码登录
                    </span>

                    <span class="h-[1px] w-16 bg-gray-200 dark:bg-gray-700"></span>
                </div>

                <!-- 引入 Element Plus 表单组件，移动端设置宽度为 5/6，PC 端设置为 2/5 -->
                <el-form class="w-5/6 md:w-2/5" ref="formRef" :rules="rules" :model="form">
                    <el-form-item prop="username">
                        <!-- 输入框组件 -->
                        <el-input size="large" v-model="form.username" placeholder="请输入用户名" :prefix-icon="User"
                            clearable />
                    </el-form-item>
                    <el-form-item prop="password">
                        <!-- 密码框组件 -->
                        <el-input size="large" type="password" v-model="form.password" placeholder="请输入密码"
                            :prefix-icon="Lock" clearable show-password />
                    </el-form-item>
                    <el-form-item>
                        <!-- 登录按钮，宽度设置为 100% -->
                        <el-button class="w-full mt-2" size="large" type="primary" :loading="loading"
                            @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
// 引入 Element Plus 中的用户、锁图标
import { User, Lock, Checked } from '@element-plus/icons-vue'
import { login } from '@/api/admin/user';
import {ref, reactive, onMounted, onBeforeUnmount} from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { showMessage } from '@/composables/utils';
import { setToken } from '@/composables/auth';
import { useUserStore } from '@/stores/user';
import { useDark, useToggle } from '@vueuse/core'
const userStore = useUserStore()
const router = useRouter()

// 是否是白天
const isLight = ref(true)
const isDark = useDark({
  onChanged(dark) {
    // update the dom, call the API or something
    console.log('onchange:' + dark)
    if (dark) {
        // 给 body 添加 class="dark"
        document.documentElement.classList.add('dark');
        // 设置 switch 的值
        isLight.value = false
    } else {
        // 移除 body 中添加 class="dark"
        document.documentElement.classList.remove('dark');
        isLight.value = true
    }
  },
})
const toggleDark = useToggle(isDark)
const form = reactive({
    username: "",
    password: ""
})

const formRef = ref(null)
//表单验证规则
const rules = {
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "密码不能为空！",
            trigger: "blur"
        }
    ]
}
//登录加载按钮
const loading = ref(false)
//登录
const onSubmit = () => {
    console.log("用户登录")
    //先验证表单字段是否合法
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log("表单验证参数不合法")
            return false
        }
        //开始加载
        loading.value = true
        login(form.username, form.password).then((res) => {
            console.log(res)
            //登录成功则自动跳转到首页
            if (res.success == true) {
                //提示登录成功
                showMessage("您好！" + form.username + "，登录成功！")
                //跳转到后台首页
                router.push('/admin/index')
                //将token保存到cookie
                let token = res.data.token
                setToken(token)
                //获取用户信息
                userStore.setUserInfo()
            } else {
                //提示登录失败
                let message = res.message
                ElMessage({
                    message: message,
                    type: "error"
                })
            }
        }).finally(() => {
            //结束加载
            loading.value = false
        })
    })
}

// 按回车键后，执行登录事件
function onKeyUp(e) {
    console.log(e)
    if (e.key == 'Enter') {
        onSubmit()
    }
}

// 添加键盘监听
onMounted(() => {
    console.log('添加键盘监听')
    document.addEventListener('keyup', onKeyUp)
})

// 移除键盘监听
onBeforeUnmount(() => {
    document.removeEventListener('keyup', onKeyUp)
})

</script>

<style scope>
/* From Uiverse.io by rishichawda */ 
/* The switch - the box around the slider */
#theme-toggle-button {
  /* font-size: 17px; */
  position: relative;
  /* display: inline-block; */
  /* width: 7em; */
  /* height: 4em; */
  cursor: pointer;
  /* display: block; */
}

/* Hide default HTML checkbox */
#toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

#container,
#patches,
#stars,
#button,
#sun,
#moon,
#cloud {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.25s;
}

/* night sky background */
#toggle:checked + svg #container {
  fill: #2b4360;
}

/* move button to right when checked */
#toggle:checked + svg #button {
  transform: translate(28px, 2.333px);
}

/* show/hide sun and moon based on checkbox state */
#sun {
  opacity: 1;
}

#toggle:checked + svg #sun {
  opacity: 0;
}

#moon {
  opacity: 0;
}

#toggle:checked + svg #moon {
  opacity: 1;
}

/* show or hide background items on checkbox state */
#cloud {
  opacity: 1;
}

#toggle:checked + svg #cloud {
  opacity: 0;
}

#stars {
  opacity: 0;
}

#toggle:checked + svg #stars {
  opacity: 1;
}

</style>